<template>
    <el-tabs
    v-model="editableTabsValue"
    type="card"
    editable
    @edit="handleTabsEdit"
  >
    <el-tab-pane
      v-for="item in tabList"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      {{ item.content }}
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      tabList: [],
      tabPro:{
          name:'',
          title:''
      }
    };
  },
  watch: {
    $route() {//监听$route
      this.getTabList();
    },
  },
  methods: {
    isHome(route) {
      return route.name === "home";
    },
    getTabList() {
      let matched = this.$route.matched;
      console.log('matched>',matched[matched.length - 1])
      let tabObj = matched[matched.length - 1];
      this.tabPro.name=tabObj.path;
      this.tabPro.title=tabObj.meta.title;
      this.tabList.push(this.tabPro);
    //   //如果不是首页
    //   if (!this.isHome(matched[0])) {
    //     matched = [].concat(matched);
    //   }
    //   this.breadList = matched;
    },
  },
  created() {
    //生命周期中调用获取数据的方法
    this.getTabList();
  },
};
</script>